/**
 *  1. 创建项目目录结构
 *       cart-project
 *          -|src
 *            -|css
 *            -|js
 *            -|pages
 * 
 * 2. 初始化项目
 *      npm init -y
 *       cart-project
 *          -|src
 *            -|css
 *            -|js
 *            -|pages
 *          -|pagckage.json
 * 3. 本地安装gulp
 *      npm i gulp
 * 
 * 4. 配置文件gulpfile.js
 *     4.1 写任务
 */
const gulp = require('gulp') //引入本地安装的gulp
const cssmin = require('gulp-cssmin') //css压缩处理
const uglify = require('gulp-uglify') //js压缩处理
const babel = require('gulp-babel') //es6->es5
const htmlmin = require('gulp-htmlmin') //html压缩处理
const clean = require('gulp-clean') //清除目录
const webserver = require('gulp-webserver') //内置web服务器
const autoprefixer = require('gulp-autoprefixer')

// const sa = require('sass')
// const gulpSass = require('gulp-sass')
// const sass = gulpSass(sa)

const sass = require('gulp-sass')(require('sass')) // 引入第三方包作用sass文件传成css文件


/**
 * css打包任务
 *   压缩处理  第三方包 cssmin
 */
gulp.task('css', function () {
    return gulp.src('./src/css/**')
        //    .pipe(autoprefixer({overrideBrowserslist:['last 2 versions']}))
           .pipe(cssmin())
           .pipe(gulp.dest('./dist/css/'))
})


/**
 * sass打包任务
 *   1. sass->css
 *   2. 压缩
 *   
 */
gulp.task('sass', function () {
    return gulp.src('./src/sass/**') //读取文件流
           .pipe(sass()) // sass文件流转到css文件流
        //    .pipe(autoprefixer({
        //        browsers:['last 2 versions']
        //    }))
           .pipe(cssmin())  //css文件压缩处理
           .pipe(gulp.dest('./dist/css/')) //写入dist/css目录
})


/**
 *  js打包任务
 *    1. 压缩js代码
 *    2. es6最新语法转成es5语法
 *         ()=>{}      function(){}
 *         class A     function A(){}
 *         let const  -> var
 */
gulp.task('js',function(){
    return gulp.src('./src/js/**')
          .pipe(babel({
              presets:['es2015']
          }))
          .pipe(uglify())
          .pipe(gulp.dest('./dist/js/'))
})

/**
 * html打包任务
 *   1. 压缩html代码
 */
gulp.task('html',function(){
    return gulp.src('./src/pages/**')
           .pipe(htmlmin({
               removeEmptyAttributes:true,
               collapseWhitespace:true
           }))
           .pipe(gulp.dest('./dist/pages/'))
})

/**
 * lib和static打包
 */
gulp.task('lib',function(){
    return gulp.src('./src/lib/**')
           .pipe(gulp.dest('./dist/lib/'))
})
gulp.task('static',function(){
    return gulp.src('./src/static/**')
           .pipe(gulp.dest('./dist/static/'))
})


/**
 * 清除dist目录任务
 */
gulp.task('clean', function(){
    return gulp.src('./dist',{allowEmpty:true})
           .pipe(clean())
})

/**
 * 启动webserver
 */
gulp.task('webserver',function(){
    return gulp.src('./dist')
           .pipe(webserver({
               host:'localhost',
               port:3000,
               livereload:true,
               open:'./pages/index.html'
           }))
})

/**
 * 监听所有文件变化任务
 */
gulp.task('watch',function(){
    gulp.watch('./src/css/**',gulp.parallel('css'))
    gulp.watch('./src/js/**',gulp.parallel('js'))
    gulp.watch('./src/sass/**',gulp.parallel('sass'))
    gulp.watch('./src/pages/**',gulp.parallel('html'))
    gulp.watch('./src/static/**',gulp.parallel('static'))
    gulp.watch('./src/lib/**',gulp.parallel('lib'))
})


/**
 * 顺序执行所有任务
 */
gulp.task('mytask',gulp.series('sass','css','js','html','static','lib'))

/**
 * 定义一个默认任务
 * exports.default暴露一个默认任务
    根目录下可执行运行默认任务，通过 gulp 命令
 */
// exports.default = gulp.series('sass','css','js','html','static','lib')
// exports.default = gulp.parallel('clean','sass','css','js','html','static','lib')
exports.default = gulp.series(
                    'clean',
                     gulp.parallel('sass','css','js','html','static','lib'),
                     'webserver', 
                     'watch')
